<template>
	<div class="preview-img-box">
		<el-image
			class="preview-img-box"
			:preview-teleported="true"
			style="width: 100%; height:100%; border-radius: 20px"
			:src="imgUrl"
      v-show="imgUrl"
			fit="cover"
		/>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { DowloadPreviewImage } from '@/utils/util'

export default defineComponent({
	props: {
		src: {  
			type: String,
		},
	},
	setup(props, { emit }) {
		const imgUrl = ref('')
		const getPreviewImage = async () => {
			if (props.src?.includes('ningxiang')) {
				const previewUrl = (await DowloadPreviewImage(props.src)) as string
				imgUrl.value = previewUrl
			} else {
				imgUrl.value = props.src
			}
		}
		watch(
			() => props.src,
			(val) => {
				getPreviewImage()
			},
			{
				immediate: true,
			}
		)
		return {
			imgUrl,
		}
	},
})
</script>

<style scoped lang="scss">
.preview-img-box {
	width: vw(120);
	height: vw(120);
	border-radius: 20px;
}
</style>
